<template>
  <div>
    <el-dialog title="所属用户" :visible.sync="dialogRoleRelUserFormVisible"   width="50%">

      <div style="float: left;margin-top: 8px;margin-bottom: 8px">
        <el-button type="primary" @click="_add">添加</el-button>
      </div>

      <div style="margin-top: 20px">
        <el-table
          :data="getPage"
          border
          height="500"
          style="width: 100%">
          <el-table-column v-for="item in columnName" :key="item.id" :label="item.label" >
            <template slot-scope="scope">
              <span>{{scope.row[item.prop]}}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="_remove(scope.row.id)"  size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>


      </div>

    </el-dialog>

    <SysUserSelect ref="sysUserSelectRef" @on-result-change="_userSelected"></SysUserSelect>
  </div>


</template>

<script>
 import  SysUserSelect from '../common/SysUserSelect'
    export default {
      components:{
        SysUserSelect
      },
      mounted(){
        this._listParent();
      },

        name: "SysRoleEdit",
      data(){
          return{
            currentPage:1, //初始页
            pageSize:10,    //    每页的数据
            total:0,    //    每页的数据
            getPage:[],
            columnName:[
              {prop:"roleName",label:"角色名称",width:"120",fixed:true},
              {prop:"username",label:"用户名",width:"120"},
              {prop:"phone",label:"手机号",width:"120"},
            ],

            roleId:'',


            pNameList:[],
            parentName: '',

            dialogRoleRelUserFormVisible: false,

            formLabelWidth: '120px'
          }
      },
      methods:{
        _add(){

          this.$refs.sysUserSelectRef._open();
        },
          _open(obj){
            this.roleId=obj.id;
            this.dialogRoleRelUserFormVisible=true;
            this._page();
          },

        _remove(id){
          this.$confirm('是否删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }).then(() => {

            this.$http.delete('/sys_role_rel_user/delete?id='+id).then(res=>{
              this._page();
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }).catch(err=>{

            })
          }).catch(() => {

          });
        },


        _userSelected(user){
         let data={roleId:this.roleId,userId:user.id};
          this.$http.post('/sys_role_rel_user/add',data).then(res=>{
            this._page();
            this.$message({
              type: 'success',
              message: '添加成功!'
            });


          }).catch(err=>{
            this.$message({
              type: 'info',
              message: '添加失败'
            });
          })
        },
        handleSizeChange(val) {
          this.pageSize=val;
          this._page();
        },
        handleCurrentChange(val) {
          this.currentPage=val;
          this._page();
        },


        _page(){
          this.$http.post('/sys_role_rel_user/page_vo?rows='+this.pageSize+'&page='+this.currentPage,{roleId:this.roleId}).then(res=>{
            let data= res.data.data;
            this.getPage=data.records;
            console.log('----------------data',data)
            console.log('-----------------',data.total)
            this.total=data.total;
          }).catch(err=>{
            console.log(err)
          });
        },

        _pNameChange(data){
            this.form.pid=data;
        },

        _listParent(){
          this.$http.get('/sys_role/list_parent').then(res=>{
                this.pNameList=res.data.data;
          }).catch(err=>{

          });
        },


          _ok(){
            let userData= this.form;
            if (undefined === userData.id){
              this.$http.post('/sys_role/add',userData).then(res=>{
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
                this.$emit('on-result-change')
                this.dialogFormVisible = false;

              }).catch(err=>{
                this.$message({
                  type: 'info',
                  message: '添加失败'
                });
              })

            } else {
              this.$http.put('/sys_role/'+userData.id,userData).then(res=>{
                this.$message({
                  type: 'success',
                  message: '编辑成功!'
                });
                this.$emit('on-result-change')
                this.dialogFormVisible = false;

              }).catch(err=>{
                this.$message({
                  type: 'info',
                  message: '编辑失败'
                });
              })
            }




          }

      },
    }
</script>

<style scoped>

</style>
